import React from 'react';
import './editAcc.scss';
import AreaData from '../../../component/areaData/areaData.js'; //地址库
import utils from '../../../utils/utils';
import cookie from 'react-cookies';
import BMap from 'BMap';
import moment from 'moment';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { List, Tabs, Row, Col,Select,DatePicker,Table,Button,Input,Radio,Checkbox,Card,Image,Descriptions,Switch, message, } from 'antd';
import { EditOutlined, DeleteOutlined ,SettingOutlined,LoadingOutlined, PlusOutlined ,UploadOutlined} from '@ant-design/icons';
import {getUserPositionInfo,getProjectInfoByAccountId,updUserAndAuthority,getAllAccounnt} from '../../../api/accountManage'
import {getPositionById,getDepartmentList,getPositionByDepartId} from '../../../api/account'
import {getProjectInfo} from '../../../api/hardwareCenter'
const { TabPane } = Tabs;
const { RangePicker } = DatePicker;
const { Option } = Select;
const { Column } = Table;
const { TextArea } = Input;
const CheckboxGroup = Checkbox.Group;
class editAcc extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource : [
                
            ],
            accType:'',
            depart_name:'',//部门
            position:'',//岗位
            position_name:'',
            uid:'',
            position_id:'',
            user:'',
            phone:'',
            authData:[],
            role_type:'',
            state:'',//在职状态
            upd_reason:'',
            checkedList:[],//选中的
            indeterminate:true,
            checkAll:false,
            partData:[],
            positionData:[],
            accstate:'',
            plainOptions:[],
            arr:[],
            arr2:[],
            str:[]
           
          
        }
    }

    componentDidMount() {
        var id = this.GetRequest().uid
        var id2 = this.GetRequest().position_id
        this.setState({
            uid: id,
            position_id:id2
        },()=>{
            this.getUserPositionInfo()
            this.getPositionById()
            this.getProject()
            this.getDepartmentList()
            this.getProjectInfo()
        })
        console.log('componentDidMount')
       
       
    }
    GetRequest = () => {
        var url = window.location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }
    // 全部项目
    getProjectInfo = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            state:'2'
        }
        getProjectInfo(post_data).then(res => {
            console.log(res)

            if(res.code == 0){
                
                res.data.map((item,index)=> {
                  
                   this.state.arr.push({label:item.id,name:item.project_name})
                })
                this.setState({
                    plainOptions: this.state.arr
                })
            }
        })
    }
    // 用户岗位信息
    getUserPositionInfo=()=> {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            uid:this.state.uid
        }
        getUserPositionInfo(post_data).then(res => {
            if(res.code == 0){
                this.setState({
                    depart_name:res.data.depart_name,
                    position_name:res.data.position_name,
                    user:res.data.user_name,
                    phone:res.data.user_phone,
                    role_type:res.data.role_type,
                    state:res.data.state,
                    state_name:res.data.state_name
                })
            }
        })
    }
    // 用户权限
    getPositionById = ()=>{
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            position_id:this.state.position_id
        }
        getPositionById(post_data).then(res => {
            if(res.code == 0){
                this.setState({
                    authData:res.data
                })
            }
        })

    }
    // 根据用户ID拿项目
    getProject = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            uid:this.state.uid
        }
        getProjectInfoByAccountId(post_data).then(res => {
            if(res.code == 0){
                res.data.map((item,index)=> {
                  
                    this.state.arr2.push(item.id)
                 })
                 this.setState({
                    dataSource: this.state.arr2
                 },()=>{
                     console.log('当前选中的【】',this.state.dataSource)
                     this.forceUpdate()
                 })
                
            }
        })

    }
    // 新建用户-获取部门
    getDepartmentList = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token
        }
        getDepartmentList(post_data).then(res => {
            if(res.code == 0){
               this.setState({
                   partData:res.data
               })
            }
        })
    }
    // 选中岗位
    selected = (val) => {
        console.log(val,'parttt')
        this.setState({
            depart_id:val.value,
            depart_name:val.label
        },()=>{
            let post_data = {
                auth_token:cookie.load('station_console_setting_web_login').auth_token,
                depart_id:this.state.depart_id
            }
            getPositionByDepartId(post_data).then(res => {
                if(res.code == 0){
                    this.setState({
                        positionData:res.data
                    })
                }
            })
        })
        
    }
    // 选中部门
    selected2 = (val) => {
        console.log(val,'posss')
       
        this.setState({
            position_id:val.value,
            position_name:val.label
        },()=>{
            // 选择不同岗位---对应不同权限
            this.getPositionById()
        })
        
    }
    // 选择账号状态
    selectedState = (val) => {
        this.setState({
            accstate:val
        },()=>{
            console.log(this.state.accstate)
        })
    }
    
    // 文本
    textChange = (e) => {
        console.log(e.target.value)
        this.setState({
            upd_reason:e.target.value
        })
    }
    // 多选框
    onChangeMore = list => {
        this.setState({
            checkedList:list,
            dataSource:list,
            // indeterminate:!!list.length && list.length < this.state.plainOptions.length,
            checkAll:list.length === this.state.dataSource.length
        },()=> {
            this.state.str =[]
            this.state.plainOptions.map((item,index)=> {
                this.state.dataSource.map((e,i)=>{
                    if(e==item.label){
                        this.state.str.push(item.name)
                    }
                })
            })
            console.log(this.state.str)
            console.log(this.state.plainOptions,this.state.checkedList,this.state.checkAll,this.state.dataSource)
        // setCheckedList(list);
        // setIndeterminate(!!list.length && list.length < plainOptions.length);
        // setCheckAll(list.length === plainOptions.length);
        })
        
    };
    
    

    // 返回
    toBefore = () => {
        window.location.href='/index/auther/autherAccount'
    }

    // 提交
    submit = () => {
        let post_data = {
            auth_token:cookie.load('station_console_setting_web_login').auth_token,
            state:this.state.accstate,
            position_id:this.state.position_id,
            project_id:this.state.dataSource.join(","),
            upd_reason:this.state.upd_reason,
            project_name:this.state.str.join(','),
            depart_name:this.state.depart_name,
            position_name:this.state.position_name,
            uid:this.state.uid

        }
        //console.log(this.state.plainOptions)
        console.log(post_data)
        updUserAndAuthority(post_data).then(res => {
            if(res.code == 0){
                message.success('修改成功',2,()=> {
                    window.location.href='/index/auther/autherAccount'
                })
            }
        })
        // 
    }


    render() {
        const {positionData, plainOptions,authData,dataSource,accType,depart, depart_name, position, position_name ,user , phone,role_type,state,depart_id,state_name,partData} = this.state;
        return (
            <Row className="edit-con">
                <BreadcrumbNav />
                
                            <Row style={{margin:'20px'}}>
                                 
                                <Col span={24}>
                                    <div className="tipss">
                                        <span className="blue"></span>
                                        <span>账号信息变更</span>
                                    </div>
                                </Col>
                                <Col span={10} className="detailinfo">
                                        <span>账号姓名：{user}</span>
                                </Col>
                                <Col span={14} className="detailinfo">
                                        <span>手机号码：{phone}</span>
                                </Col>
                                <Col span={10} className="detailinfo">
                                        <span>当前账号状态：{state_name}</span>
                                </Col>
                                <Col span={14} className="detailinfo">
                                        <span>变更账号状态至：</span>
                                        {state=='1'?<Select  size="small" placeholder="请选择账户状态"  allowClear style={{width:'200px'}} onChange={this.selectedState.bind(this)}>
                                            <Option value="2">冻结</Option>
                                            <Option value="3">离职</Option>
                                            
                                        </Select>:state == '2'?
                                            <Select  size="small" placeholder="请选择用户所属部门"  allowClear style={{width:'200px'}} onChange={this.selectedState.bind(this)}>
                                                <Option value="1">在职</Option>
                                                <Option value="3">离职</Option>
                                                
                                            </Select>
                                    :null}
                                </Col>
                                <Col span={24}  style={{margin:'10px 0px'}}>
                                    <TextArea style={{width:'880px',height:'88px'}}  onChange={this.textChange.bind(this)} placeholder="变更原因/备注：(非必填；限最多80个中文字)" />
                                </Col>
                                <Col span={24}>
                                    <div className="borders">

                                    </div>
                                </Col>
                                <Col span={24} style={{margin:'10px'}}>
                                    <span className="label">负责项目：</span>
                                    <Checkbox.Group style={{ width: '100%' }} value={dataSource} onChange={this.onChangeMore.bind(this)}>
                                        <Row>
                                        {
                                            plainOptions.map((item,index) => (
                                                <Col style={{margin:'10px',marginLeft:'20px'}} span={4}>
                                                    <Checkbox value={item.label}>{item.name}</Checkbox>
                                                </Col>
                                            ))
                                        }
                                        
                                        </Row>
                                    </Checkbox.Group>
                                </Col>
                                <Col span={24}>
                                    <div className="borders2">

                                    </div>
                                </Col>
                                <Col span={12} style={{margin:'10px'}}>
                                    <span className="label">所属部门：</span>
                                    <Select style={{width:'200px'}} 
                                    value={{value:depart_name}}
                                     size="small" placeholder="请选择用户所属部门" labelInValue allowClear onChange={this.selected.bind(this)}>
                                       
                                        {partData.map( (item,index) => 
                                            <Option value= {item.id} >{item.name}</Option>
                                        )}
                                    </Select>
                                </Col>
                                <Col span={10} style={{margin:'10px'}}>
                                    <span className="label">岗位职务</span>
                                    <Select style={{width:'200px'}} value={{value: position_name}} size="small" placeholder="请选择用户所属部门" labelInValue  allowClear onChange={this.selected2.bind(this)}>
                                        {positionData.map( (item,index) => 
                                            <Option value= {item.id} >{item.name}</Option>
                                        )}
                                    </Select>
                                </Col>
                                {role_type == 1?null:
                                    <Col span={24} style={{marginTop:'30px',marginBottom:'30px'}}>
                                        <Card size="small" title="账号权限" style={{ width:'70%',background:'#f8f8f8'}}>
                                            {
                                                authData.map((item,index) =>{
                                                    if(item.children&&item.children!=[]){                                                   
                                                        return (
                                                            <div >
                                                                <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                                                {item.children.map((el,i)=> (
                                                                    <span style={{display:'inline-block',margin:'10px',fontSize:'13px'}}>{el.menu_name}</span>
                                                                ))}
                                                            </div>
                                                        )
                                                    }else{
                                                        return (
                                                            <div>
                                                                <span style={{display:'inline-block',margin:'10px',fontSize:'16px'}}>{item.menu_name}</span>
                                                            </div>
                                                        )
                                                    }
                                                    
                                                })
                                            }
                                            
                                        </Card>
                                    </Col>
                                }
                                <Col span={24} style={{margin:'110px'}}>
                                    <Button type="primary" onClick={this.toBefore.bind(this)} style={{width:'100px',height:'40px',marginRight:'30px',marginLeft:'400px'}}>
                                        返回
                                    </Button>
                                    <Button type="primary" onClick={this.submit.bind(this)} style={{width:'100px',height:'40px',marginRight:'30px'}}>
                                        提交
                                    </Button>
                                </Col>
      
                            </Row>
                            
                            
            </Row>
        )
    }
}

export default editAcc;